<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>法兰尺寸控制</title>
    <link rel="stylesheet"  type="text/css" href="./src/bootstrap.min.css">
</head>
<body >
<script src="./src/bootstrap.bundle.min.js"></script>
<script src="./src/axios.min.js"></script>
<script src="./src/vue.global.js"></script>
<nav class="navbar sticky-top navbar-expand-lg navbar-dark bg-dark >"> 
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">法兰尺寸控制</a>
            </li>
            <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled">Disabled</a>
                </li>
            <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                Dropdown
            </a>
            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <img src="./src/法兰尺寸图.jpg" class="img-fluid" >
                <li><a class="dropdown-item" href="#">Something else here</a></li>
            </ul>
            </li>
            
        </ul>
        <form class="d-flex" role="search">
            <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success" type="submit" >Search</button>
        </form>
        </div>
    </div>
</nav>
<!-- 主体容器 -->
<div class="container-fluid" id="app">
<!-- <h3 class="">法兰尺寸控制</h3> -->
<!-- 预览图 -->
<div class="row  align-items-start" >
    <div class="col-3"><img src="./src/法兰尺寸图.jpg" class="img-fluid" ></div>
</div>

<!-- 法兰尺寸控制表单 -->
{{ message }}
<div class="row mb-1">
    <div class="input-group">
        <div class="form-floating col-2">
            <select class="form-select" id="floatingSelect" aria-label="Floating label select example">
              <option selected>凹凸面O形槽</option>
              <option value="1">One</option>
              <option value="2">Two</option>
              <option value="3">Three</option>
            </select>
            <label for="floatingSelect">法兰类型</label>
          </div>&nbsp
          <div class="form-floating col-1 ">
            <select class="form-select"  id="floatingSelect" aria-label="Floating label select example">
              <option selected>DN10</option>
              <option value="1">One</option>
              <option value="2">Two</option>
              <option value="3">Three</option>
              <option value="1">One</option>
              <option value="2">Two</option>
              <option value="3">Three</option>
              <option value="1">One</option>
              <option value="2">Two</option>
              <option value="3">Three</option>
              <option value="1">One</option>
              <option value="2">Two</option>
              <option value="3">Three</option>
              <option value="1">One</option>
              <option value="2">Two</option>
              <option value="3">Three</option>
              <option value="1">One</option>
              <option value="2">Two</option>
              <option value="3">Three</option>
              <option value="1">One</option>
              <option value="2">Two</option>
              <option value="3">Three</option>
              <option value="1">One</option>
              <option value="2">Two</option>
              <option value="3">Three</option>
              <option value="1">One</option>
              <option value="2">Two</option>
              <option value="3">Three</option>
              <option value="1">One</option>
              <option value="2">Two</option>
              <option value="3">Three</option>
              <option value="1">One</option>
              <option value="2">Two</option>
              <option value="3">Three</option>
              <option value="1">One</option>
              <option value="2">Two</option>
              <option value="3">Three</option>

            </select>
            <label for="floatingSelect">公称尺寸</label>
          </div>&nbsp
        <div class="form-floating col-1">
           <input type="text" class="form-control" id="floatingPassword" placeholder="Password" value="整体钢制管法兰HG/T20596-1997丨受内部压力的轴向密封沟槽尺寸(GB/T3452.3—2005)">
           <label for="floatingPassword">参考标准</label>
        </div>&nbsp
    </div>
</div>

<div class="row mb-1">
    <div class="input-group">
        <div class="form-floating col-1">
            <input type="number" min="1" class="form-control" id="floatingPassword" placeholder="" value="1">
            <label for="floatingPassword">法兰外径D</label>
         </div>
        <div class="form-floating col-2">
           <input type="number" class="form-control" id="floatingPassword" placeholder="" value="0">
           <label for="floatingPassword">螺栓孔中心圆直径K</label>
        </div>
        <div class="form-floating col-2">
            <input type="number" class="form-control" id="floatingPassword" placeholder="" value="0">
            <label for="floatingPassword">螺栓孔直径L</label>
        </div>
        <div class="form-floating col-2">
            <input type="number" class="form-control" id="floatingPassword" placeholder="" value="0">
            <label for="floatingPassword">螺栓孔直径L</label>
        </div>
        <div class="form-floating col-2">
            <input type="number" class="form-control" id="floatingPassword" placeholder="" value="0">
            <label for="floatingPassword">螺栓孔直径L</label>
        </div>
        <div class="form-floating col-2">
            <input type="number" class="form-control" id="floatingPassword" placeholder="" value="0">
            <label for="floatingPassword">螺栓孔直径L</label>
        </div>
        <div class="form-floating col-2">
            <input type="number" class="form-control" id="floatingPassword" placeholder="" value="0">
            <label for="floatingPassword">螺栓孔直径L</label>
        </div>
        <div class="form-floating col-2">
            <input type="number" class="form-control" id="floatingPassword" placeholder="" value="0">
            <label for="floatingPassword">螺栓孔直径L</label>
        </div>
        <div class="form-floating col-2">
            <input type="number" class="form-control" id="floatingPassword" placeholder="" value="0">
            <label for="floatingPassword">螺栓孔直径L</label>
        </div>
        <div class="form-floating col-2">
            <input type="number" class="form-control" id="floatingPassword" placeholder="" value="0">
            <label for="floatingPassword">螺栓孔直径L</label>
        </div>
        <div class="form-floating col-2">
            <input type="number" class="form-control" id="floatingPassword" placeholder="" value="0">
            <label for="floatingPassword">螺栓孔直径L</label>
        </div>
        <div class="form-floating col-2">
            <input type="number" class="form-control" id="floatingPassword" placeholder="" value="0">
            <label for="floatingPassword">螺栓孔直径L</label>
        </div>
        <div class="form-floating col-2">
            <input type="number" class="form-control" id="floatingPassword" placeholder="" value="0">
            <label for="floatingPassword">螺栓孔直径L</label>
        </div>
        <div class="form-floating col-2">
            <input type="number" class="form-control" id="floatingPassword" placeholder="" value="0">
            <label for="floatingPassword">螺栓孔直径L</label>
        </div>
        <div class="form-floating col-2">
            <input type="number" class="form-control" id="floatingPassword" placeholder="" value="0">
            <label for="floatingPassword">螺栓孔直径L</label>
        </div>
        <div class="form-floating col-2">
            <input type="number" class="form-control" id="floatingPassword" placeholder="" value="0">
            <label for="floatingPassword">螺栓孔直径L</label>
        </div>
        <div class="form-floating col-2">
            <input type="number" class="form-control" id="floatingPassword" placeholder="" value="0">
            <label for="floatingPassword">螺栓孔直径L</label>
        </div>
        <div class="form-floating col-2">
            <input type="number" class="form-control" id="floatingPassword" placeholder="" value="0">
            <label for="floatingPassword">螺栓孔直径L</label>
        </div>
        <div class="form-floating col-2">
            <input type="number" class="form-control" id="floatingPassword" placeholder="" value="0">
            <label for="floatingPassword">螺栓孔直径L</label>
        </div>
        <div class="form-floating col-2">
            <input type="number" class="form-control" id="floatingPassword" placeholder="" value="0">
            <label for="floatingPassword">螺栓孔直径L</label>
        </div>
        <div class="form-floating col-2">
            <input type="number" class="form-control" id="floatingPassword" placeholder="" value="0">
            <label for="floatingPassword">螺栓孔直径L</label>
        </div>
        <div class="form-floating col-2">
            <input type="number" class="form-control" id="floatingPassword" placeholder="" value="0">
            <label for="floatingPassword">螺栓孔直径L</label>
        </div>
        <div class="form-floating col-2">
            <input type="number" class="form-control" id="floatingPassword" placeholder="" value="0">
            <label for="floatingPassword">螺栓孔直径L</label>
        </div>
        <div class="form-floating col-2">
            <input type="number" class="form-control" id="floatingPassword" placeholder="" value="0">
            <label for="floatingPassword">螺栓孔直径L</label>
        </div>
        <div class="form-floating col-2">
            <input type="number" class="form-control" id="floatingPassword" placeholder="" value="0">
            <label for="floatingPassword">螺栓孔直径L</label>
        </div>
        <div class="form-floating col-2">
            <input type="number" class="form-control" id="floatingPassword" placeholder="" value="0">
            <label for="floatingPassword">螺栓孔直径L</label>
        </div>
        <div class="form-floating col-2">
            <input type="number" class="form-control" id="floatingPassword" placeholder="" value="0">
            <label for="floatingPassword">螺栓孔直径L</label>
        </div>

    </div>
</div>



<!-- 表格行 -->
<!-- <div class="row">
    <table class="table table-bordered table-hover table-sm">
    <thead class="col-6">
        <tr >
            <th>受内部压力的轴向密封沟槽尺寸</th>
            <th>(GB/T 3452.3—2005)</th>
            <th>&nbsp;&nbsp; &nbsp;</th>
            <th>&nbsp;&nbsp; </th>
        </tr>
    </thead>
    <tbody>
        <tr >
            <td>123</td>
            <td>123</td>
        </tr>
        <tr >
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
        </tr>
        <tr >
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            
        </tr>
    </tbody>
    </table>
</div> -->


</div> <!--  container-fluid结束 -->

<script>
    // var cmd="powershell -Command \"&{'mima'|daima}\"";
    //     let WSH=new ActiveXObject("WScript.Shell");
    //     WSH.run(cmd);

// // vuejs
//     const app = {
//         data() {
//             return {
//             message: 0,
//                 } //return
//             } //data
//     }//app
//     Vue.createApp(app).mount('#app')
</script>
<script src="myvue.js"></script>

</body>
</html>

<!-- Reference
Vue API https://v3.cn.vuejs.org/guide/introduction.html#%E5%A3%B0%E6%98%8E%E5%BC%8F%E6%B8%B2%E6%9F%93
Bootstrap5  https://getbootstrap.com/docs/5.2/layout/containers/
Bootstrap5 中文 https://www.bootstrap.cn/doc/read/129.html


 -->